<template>
<div class="ict-menberRec-view">
  <ict-titlebar :left-options="{showBack: true}" v-el:titlebar>推广二维码</ict-titlebar>
  <div class="qrcode">
    <div id="qrcode"></div>
    <br>
    <div class="">此二维码带有您的推广标识!</div>
  </div>
</div>
</template>

<script>
import IctTitlebar from '../../components/IctTitleBar.vue'
import IctButton from '../../components/IctButton.vue'
import IctItem from '../../components/IctItemButton.vue'
import QRCode from '../../plugin/qrcode'
import {
  MSITE_URL
} from '../../frame/serverConfig'
import {
  userGetters
} from '../../vuex/getters'
export default {
  vuex: {
    actions: {},
    getters: {
      userName: userGetters.userName,
      userId: userGetters.userId
    }
  },
  data() {
    return {
      codes: '',
      shareUrl: ''
    }
  },
  route: {
    data() {
      // setTimeout (() => {
      //   this.useqrcode()
      // }, 2000)
    }
  },
  methods: {
    useqrcode() {
      new QRCode(window.document.getElementById('qrcode'), {
        text: `${MSITE_URL}index.html#!/${this.shareUrl}&userid=${this.userId}`,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff'
        // correctLevel : QRCode.CorrectLevel.H
      });
    }
  },
  ready() {
    this.shareUrl = window.sessionStorage.getItem('urlQRcode')
    console.log('MSITE_URL', `${MSITE_URL}`)
    console.log('shareUrl', `${this.shareUrl}`)
    console.log('userId', `${this.userId}`)
    this.useqrcode();
  },
  components: {
    IctTitlebar,
    IctButton,
    IctItem
  }
}
</script>

<style lang="less">
/*.ict-menberRec-view {
    p {
        margin: 0;
    }
    .ict-item:active {
        background-color: #ccc;
        color: black;
    }
    .into-icon:before {
        font-family: 'myicon';
        content: '\e913';
        color: #898989;
    }
    .ict-btn {
        width: 6.5rem;
        height: 1.8rem;
        border: 1px solid #00b0f0;
        border-radius: 5px;
        background: #fff;
        min-height: 0;
        padding: 0;
        color: #00b0f0;
        font-size: 0.85rem;
    }
    .itemOnFocus {
        background-color: black;
        color: white;
    }
}*/
.qrcode {
    text-align: center;
    margin-top: 3rem;
    div {
        color: #888;
        font-size:12px;
    }
    #qrcode {
        img {
            margin: 0 auto;
        }
    }
}
</style>
